<template>
	<view class="container">
		<view class="title">
			选择当前的学习阶段
			<view>为了更好的匹配课程内容</view>
		</view>
		<view class="model" v-for="(item,index) in gradeInfo" :key="index">
			<view class="grade y_center">
				<view class="icon"></view>
				<view class="text">
					{{item.name}}
				</view>
			</view>
			<view class="selectContainer">
				<view class="item" 
				@click="savelearningPhase(v.name)"
				v-for="(v,k) in item.list" 
				:key="k">
					{{v.name}}
				</view>
			</view>
		</view>
			<view class="item" 
			@click="savelearningPhase(item.name)"
			v-for="(item,index) in info.grade_phase" :key="index">
				{{item.name}}
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				token:'',
				gradeInfo:[],
				}
		},
		created() {
			this.getData();
		},
		methods: {
			savelearningPhase(phase){
				uni.setStorage({
					key: 'phase',
					data: phase,
					success: () => {
						uni.switchTab({
							url: './index'
						});
					}
				});
			},
			getData(){
				this.$request('/api/wxapp/v2/index/getLearningPhase').then(res => {
					console.log(res)
					if (res.code === 1) {
						this.gradeInfo = res.data;
					}
				})
			}
		},
		
	}
</script>

<style scoped lang="scss">
	.container {
		padding: 40rpx;
	}
	.model{
		margin-bottom: 40rpx;
	}
	.title {
		font-size: 15px;
		font-weight: 500;
		color: #333333;
		line-height: 46rpx;

		view {
			font-size: 13px;
			color: #999999;
		}
	}

	.selectContainer {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-start;

		.item {
			padding: 18rpx 37rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 40rpx 0px #E9EBF6;
			border-radius: 36rpx;
			margin-top: 40rpx;
			font-size: 13px;
			color: #333333;
			text-align: center;
			background: #F4F4F4;
			margin-right: 20rpx;
		}
		.item:nth-child(4n){
			margin-right: 0;
		}
	}
	.grade{
		font-size: 15px;
		font-weight: 700;
		color: #333333;
		line-height: 23px;
		margin-top: 40px;
		.icon{
			width: 4px;
			height: 15px;
			background: #7ED3CA;
			border-radius: 2px;
			margin-right: 6px;
		}
	}
</style>
